<template>
  <div class="box5">
    <div class="title">
      <p>门槛视觉右侧检测趋势图</p>
    </div>
    <div class="charts" ref="lineR"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 随机生成数据
const generateRandomData = () => {
  const data = []
  for (let i = 0; i < 12; i++) {
    data.push(Math.floor(Math.random() * (9 - 5 + 1) + 0)) // 生成0到10之间的随机整数作为数据
  }
  return data
}
//获取图形图表的DOM的节点
let lineR = ref()
//监听组件的mounted事件
onMounted(() => {
  //初始化图表
  let mychartsR = echarts.init(lineR.value)
  const randomData1 = generateRandomData() // 生成随机数据
  const randomData2 = generateRandomData() // 生成随机数据
  const randomData3 = generateRandomData() // 生成随机数据
  const randomData4 = generateRandomData() // 生成随机数据
  const randomData5 = generateRandomData() // 生成随机数据

  //设置配置项
  mychartsR.setOption({
    //标题组件
    title: {
      text: '2024.04.15  R',
      top: '10',
      left: 'center',
    },
    legend: {
      show: true,
      left: 20,
      bottom: 80,
      align: 'auto',
      // padding: 5,
      // itemGap: 10,
      // itemWidth: 20,
      // itemHeight: 10,

      data: ['5-6点', '7-8 点', '9-10点', '11-12点', '13-14点'],
    },
    //X|Y轴
    xAxis: {
      type: 'category', //在X轴上均匀分布
      boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
      name: '（时间）',
      splitLine: {
        //是否显示分隔线。默认数值轴显示，类目轴不显示。
        show: false,
      },
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    },
    yAxis: {
      splitLine: {
        //是否显示分隔线。默认数值轴显示，类目轴不显示。
        show: true,
      },
      name: '（厘米）',
      //轴的设置
      axisLine: {
        show: true,
      },
      //刻度
      axisTick: {
        show: true,
      },
      data: ['1', '3', '5', '7', '9', '11', '13', '15'],
    },
    //布局
    grid: {
      left: 50,
      top: 90,
      right: 0,
      bottom: 10,
      height: 150,
      width: 300,
    },
    //系列
    series: [
      {
        name: '5-6点',
        type: 'line', //折线图
        data: randomData1, // 使用随机数据
        //平滑曲线的设置
        smooth: false,
      },
      {
        name: '7-8 点',
        type: 'line', //折线图
        data: randomData2, // 使用随机数据
        //平滑曲线的设置
        smooth: false,
      },
      {
        name: '9-10点',
        type: 'line', //折线图
        data: randomData3, // 使用随机数据
        //平滑曲线的设置
        smooth: false,
      },
      {
        name: '11-12点',
        type: 'line', //折线图
        data: randomData4, // 使用随机数据
        //平滑曲线的设置
        smooth: false,
      },
      {
        name: '13-14点',
        type: 'line', //折线图
        data: randomData5, // 使用随机数据
        //平滑曲线的设置
        smooth: false,
      },
    ],
  })
})


</script>

<style scoped lang="scss">
.box5 {
  width: 100%;
  height: 100%;
  //background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: cover;
  margin: 0px 20px;
  .title {
    margin-left: 10px;

    p {
      color: rgb(33, 182, 212);
      font-size: 20px;
    }
  }
  .charts {
    height: 100%;
  }
}
</style>
